<template>
	<view class="contain">
	<view class="flex-col page">
	  <view class="flex-col flex-auto group">
	    <view class="flex-col relative group_2">
	      <view class="group_3"></view>
	      <view class="flex-row equal-division">
	        <view class="flex-col justify-start items-start equal-division-item section">
	          <text class="font_2 text_2">在线买宠</text>
	          <image
	            class="shrink-0 image_5 pos_2"
	            src="https://qiniu.ccchongya.com/chongya/images/16947555547439054000.png"
	          />
	          <text class="font_3 text_4 pos_5">一个网上买卖宠物的爱宠集市</text>
	        </view>
	        <view class="flex-row justify-end items-start equal-division-item_2 section_2">
	          <view class="section_4"></view>
	          <view class="section_5 view"></view>
	          <view class="section_5 view_2"></view>
	          <view class="section_5 view_3"></view>
	          <view class="flex-col justify-start items-start section_3 pos_3">
	            <text class="font_2 text_3">在线卖宠</text>
	            <image
	              class="image_6 pos_4"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555549318313532.png"
	            />
	            <text class="font_3 text_5 pos_6">官网认证 放心买卖</text>
	          </view>
	        </view>
	      </view>
	      <view class="flex-col section_6">
	        <view class="flex-col section_7">
	          <view class="flex-row group_4">
	            <view class="flex-col justify-start"><text class="font_4 text_6">哺乳类</text></view>
	            <view class="flex-col justify-start items-center text-wrapper">
	              <text class="font_4 text_7">鸟类</text>
	            </view>
	            <view class="flex-col justify-start items-center text-wrapper">
	              <text class="font_4 text_7">鱼类</text>
	            </view>
	            <view class="flex-col justify-start text-wrapper_2"><text class="font_4 text_8">爬行类</text></view>
	          </view>
	          <view class="self-start section_8"></view>
	        </view>
	        <view class="grid">
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555503021200289.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555503720525250.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555505348985508.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555501696472109.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555504605268937.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555507075674319.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555502925490049.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555505180098737.png"
	            />
	            <text class="self-center font_5 text_9">【独家】马XXX：传统企业家为什么不会好好说话？</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555509118802233.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555550368003767.png"
	            />
	            <text class="self-center font_5 text_9">从硅谷火到中国特斯拉发布全新半挂卡车Semi。</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555551208616303.png"
	            />
	            <text class="self-center font_5 text_9">【重磅】人民币贬值了，2015投资应该放在这四个领域</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555554352467760.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555550946391051.png"
	            />
	            <text class="self-center font_5 text_9">无聊青年最后的对话阵地：网易新闻评论区</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555552238478129.png"
	            />
	            <text class="self-center font_5 text_9">
	              安娜公主儿童仿真猫咪玩具会叫会动猫猫小玩偶猫毛绒电动女孩宠物动物
	              <br />
	              2000+条评价
	            </text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	          <view class="flex-col relative grid-item space-y-9">
	            <image
	              class="image_7"
	              src="https://qiniu.ccchongya.com/chongya/images/16947555556101714804.png"
	            />
	            <text class="self-center font_5 text_9">可鲁口腔喷剂 复合溶菌酶宠物喷雾 口臭口腔...</text>
	            <view class="flex-row justify-evenly items-baseline group_5">
	              <text class="font_7">价格：</text>
	              <text class="font_8">￥</text>
	              <view class="group_6">
	                <text class="font_1 text_10">1</text>
	                <text class="font_6 text_10">85.00</text>
	              </view>
	            </view>
	          </view>
	        </view>
	      </view>
	      <image
	        class="image_4 pos"
	        src="https://qiniu.ccchongya.com/chongya/images/16947555546180924915.png"
	      />
	    </view>
	    <view class="flex-row equal-division_2">
	      <view class="flex-col items-center group_7 equal-division-item_3 space-y-4">
	        <image
	          class="image_8"
	          src="https://qiniu.ccchongya.com/chongya/images/b0524fd56b8df95e0dd1609bc4977578.png"
	        />
	        <text class="font_9 text_11">首页</text>
	      </view>
	      <view class="flex-col items-center group_7 equal-division-item_3 space-y-4">
	        <image
	          class="image_8"
	          src="https://qiniu.ccchongya.com/chongya/images/03ebec244e7f26d7bcaeb00da5c73825.png"
	        />
	        <text class="font_9">拖运</text>
	      </view>
	      <view class="flex-col items-center group_7 equal-division-item_3 space-y-4">
	        <image
	          class="image_8"
	          src="https://qiniu.ccchongya.com/chongya/images/3fca2aa62f3c93aa4fea8d5e28014e29.png"
	        />
	        <text class="font_9">宠圈</text>
	      </view>
	      <view class="flex-col items-center group_7 equal-division-item_3 space-y-4">
	        <image
	          class="image_8"
	          src="https://qiniu.ccchongya.com/chongya/images/16947555382962496709.png"
	        />
	        <text class="font_9">服务</text>
	      </view>
	      <view class="flex-col items-center group_7 equal-division-item_3 space-y-4">
	        <image
	          class="image_8"
	          src="https://qiniu.ccchongya.com/chongya/images/ca00ffcfeb61390fb30da9bd21da0813.png"
	        />
	        <text class="font_9">我的</text>
	      </view>
	    </view>
	  </view>
	</view>
	</view>
</template>
<style scoped>
/* //code.fun生成的全局 */
@import url('../../static/css/style.css');

.page {
  background-color: #f5f7f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.font_1 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 21rpx;
  color: #ff5733;
}
.group {
  overflow-y: auto;
}
.group_2 {
  padding: 0 20rpx 24rpx;
}
.group_3 {
  border-radius: 20rpx;
  overflow: hidden;
  height: 266rpx;
}
.equal-division {
  margin-top: 22rpx;
}
.equal-division-item {
  position: relative;
  flex: 1 1 346rpx;
}
.section {
  padding: 32rpx 0 104rpx;
  background-image: linear-gradient(110.9deg, #fe9176 1.3%, #fd8f76cf 98.2%);
  border-radius: 20rpx;
  overflow: hidden;
  height: 166rpx;
}
.font_2 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  font-weight: 700;
  color: #ffffff;
}
.text_2 {
  margin-left: 24rpx;
}
.image_5 {
  width: 222rpx;
  height: 166rpx;
}
.pos_2 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.font_3 {
  font-size: 20rpx;
  font-family: HarmonyOSSansSC;
  line-height: 21rpx;
  color: #ffffff;
}
.text_4 {
  font-size: 22rpx;
  width: 288rpx;
}
.pos_5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.equal-division-item_2 {
  position: relative;
  flex: 1 1 346rpx;
  margin-left: 16rpx;
}
.section_2 {
  padding: 100rpx 12rpx 36rpx;
  background-image: linear-gradient(116.2deg, #9294ff 3.9%, #9194ffbd 91.4%);
  border-radius: 20rpx;
  overflow: hidden;
  height: 166rpx;
}
.section_4 {
  margin-right: 12rpx;
  background-color: #ffffff;
  border-radius: 270rpx;
  width: 28rpx;
  height: 6rpx;
}
.section_5 {
  background-color: #ffffff75;
  border-radius: 270rpx;
  width: 28rpx;
  height: 6rpx;
}
.view {
  margin-right: 12rpx;
}
.view_2 {
  margin-right: 12rpx;
  margin-top: 22rpx;
}
.view_3 {
  margin-top: 22rpx;
}
.section_3 {
  padding: 32rpx 0 100rpx;
  background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555549283841664.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.pos_3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.text_3 {
  margin-left: 24rpx;
}
.image_6 {
  width: 252rpx;
  height: 166rpx;
}
.pos_4 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.text_5 {
  font-size: 22rpx;
}
.pos_6 {
  position: absolute;
  left: 26rpx;
  bottom: 59rpx;
}
.section_6 {
  margin-top: 16rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
}
.section_7 {
  padding: 0 24rpx 20rpx;
  background-image: linear-gradient(0deg, #ffffff45 0%, #ffeb3b45 100%);
}
.group_4 {
  padding: 36rpx 4rpx 8rpx;
}
.font_4 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #000000;
}
.text_6 {
  line-height: 26rpx;
}
.text-wrapper {
  margin-left: 56rpx;
  width: 86rpx;
}
.text_7 {
  line-height: 26rpx;
}
.text-wrapper_2 {
  margin-left: 72rpx;
}
.text_8 {
  line-height: 26rpx;
}
.section_8 {
  background-color: #ffeb3b;
  border-radius: 110rpx;
  width: 84rpx;
  height: 7rpx;
}
.grid {
  padding-bottom: 8rpx;
  height: 1745rpx;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 14rpx;
}
.grid-item {
  padding: 12rpx 8rpx 24rpx;
}
.space-y-9 > view:not(:first-child),
.space-y-9 > text:not(:first-child),
.space-y-9 > image:not(:first-child) {
  margin-top: 18rpx;
}
.image_7 {
  overflow: hidden;
  width: 220rpx;
  height: 214rpx;
}
.font_5{
  font-size: 18rpx;
  font-family: HarmonyOSSansSC;
  line-height: 1.5;
  color: #081329;
}
.text_9 {
  /* line-height: 26rpx; */
}
.group_5 {
  padding: 0 20rpx;
}
.font_7 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 15rpx;
  color: #666e7a;
}
.font_8 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 12rpx;
  color: #ff5733;
}
.group_6 {
  line-height: 24rpx;
  height: 24rpx;
}
.font_6 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ff5733;
}
.text_10 {
  word-break: break-all;
}
.image_4 {
  border-radius: 20rpx;
  overflow: hidden;
  width: 708rpx;
  height: 266rpx;
}
.pos {
  position: absolute;
  left: 20rpx;
  right: 22rpx;
  top: 0;
}
.equal-division_2 {
  padding: 24rpx 0;
  background-color: #ffffff;
  overflow: hidden;
}
.group_7 {
  flex: 1 1 150rpx;
}
.equal-division-item_3 {
  padding: 12rpx 0;
}
.space-y-4 > view:not(:first-child),
.space-y-4 > text:not(:first-child),
.space-y-4 > image:not(:first-child) {
  margin-top: 8rpx;
}
.image_8 {
  width: 48rpx;
  height: 48rpx;
}
.font_9 {
  font-size: 20rpx;
  font-family: HarmonyOSSansSC;
  line-height: 18rpx;
  color: #666e7a;
}
.text_11 {
  color: #ffbd52;
}

</style>
<script>
	const $ = require('@/utils/api.js');
	let self;
	export default {
		data() {
			return {
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				cateList: [],
				height: 0,
				active: 0,
			};
		},
		onLoad: function() {
			self = this;
			let height = getApp().globalData.height;
			height = height-44-this.top;
			this.height = height;
			this.init();
		},
		methods: {
			getCate() {
				$.ajax({
					url: 'common/goodsCate/getList',
					data: {},
					method: 'GET',
					success(res) {
						self.cateList = res.data;
					}
				})
			},
			init() {
				this.getCate();
			},
		},
		created() {
		},
		computed: {
			i18n() {
				return this.$t('search')
			},
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
